import React, { Component } from 'react'
import './index.css'
import axios from 'axios'
export default class List extends Component {
    
    getStudentData = () => {
        //跨域的原因一般就是ajax引擎的限制，通过中间人代理转发就不会出现此限制
        //跨域的解决方案一般使用中间人代理转发
        //跨域的时候接口是成功访问，但是返回数据后会被ajax阻挡（因为不同源）
        //此时需要将访问接口访问到同源端口的中间代理，再通过代理进行转发（不通过ajax）获取到数据再返回到前端，即可规避ajax的限制
        axios.get('http://localhost:5502/api1/students').then(
            //注意本项目的端口是5502不是3000使用3000端口也会报错无法访问
            response =>{console.log(`成功了`, response.data)},
            error =>{console.log(`成功了`,error)}
        )
    }
    getCarData = () => {
        //跨域的原因一般就是ajax引擎的限制，通过中间人代理转发就不会出现此限制
        //跨域的解决方案一般使用中间人代理转发
        //跨域的时候接口是成功访问，但是返回数据后会被ajax阻挡（因为不同源）
        //此时需要将访问接口访问到同源端口的中间代理，再通过代理进行转发（不通过ajax）获取到数据再返回到前端，即可规避ajax的限制
        axios.get('http://localhost:5502/api2/cars').then(
            response =>{console.log(`成功了`, response.data)},
            error =>{console.log(`成功了`,error)}
        )
    }
    render() {
        return (
        <div>
            <button onClick={this.getStudentData}>点我获取学生数据</button>
            <button onClick={this.getCarData}>点我获取汽车数据</button>
        </div>
        )
        
    }
}
